<template>
  <nav class="fixed w-full py-4 px-6 z-50 backdrop-blur-md bg-white/10">
    <div class="max-w-7xl mx-auto flex justify-between items-center">
      <a href="#" class="text-2xl font-bold gradient-text">FLOX</a>
      <div class="hidden md:flex space-x-8">
        <router-link to="/" class="text-white hover:text-pink-300 transition-colors">电影列表</router-link>
        <router-link to="/cinema" class="text-white hover:text-yellow-300 transition-colors">影院列表</router-link>
        <router-link to="/user" class="text-white hover:text-green-300 transition-colors">个人中心</router-link>
        <router-link to="/order" class="text-white hover:text-blue-300 transition-colors">我的订单</router-link>
      </div>
      <button class="md:hidden text-white">
        <i class="fas fa-bars text-2xl"></i>
      </button>
    </div>
  </nav>
</template>

<script>
export default {
  name: 'MovieHeader'
}
</script>

<style scoped>
.transition-colors {
  transition-property: color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.hover\:text-pink-300:hover {
  color: #f9a8d4;
}

.hover\:text-yellow-300:hover {
  color: #fcd34d;
}

.hover\:text-green-300:hover {
  color: #86efac;
}

.hover\:text-blue-300:hover {
  color: #93c5fd;
}

.space-x-8 > * + * {
  margin-left: 2rem;
}
</style>